<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <link rel="stylesheet" href="./css/02-reset.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2976530_owr7i341jws.css">
    <link rel="icon" href="./images/京东-01.png">
    <link rel="stylesheet" href="css/auto.css">
    <link rel="stylesheet" href="css/aright.css">
    <link rel="stylesheet" href="css/mright.css">
    <link rel="stylesheet" href="css/mbottom.css">
    <link rel="stylesheet" href="css/center.css">
    <link rel="stylesheet" href="css/bauto.css">
    <style>
        body {
            background-color: #ccc;
        }

        .box1 {
            width: 100%;
            height: 50px;
            background-color: #e9ccd3;
            box-sizing: border-box;
            min-width: 1200px;
        }

        .box1 ul {
            width: 1000px;
            height: 50px;
            float: right;

        }

        .box1 ul li {
            float: left;
        }

        .box1 ul li a {
            display: inline-block;
            text-align: center;
            line-height: 50px;
            font-size: 20px;
            width: 200px;
            height: 50px;
        }

        .box1 p {
            float: left;
            font-size: 20px;
            line-height: 50px;
            margin-left: 100px;
            min-width: 100px;
        }

        .box1 ul li a:hover {
            background-color: #b598a1;
        }

        .bann {
            width: 100%;
            height: 120px;
            min-width: 1100px;
            border-bottom: 1px solid #ccc;
            margin-bottom: 10px;
            background-color: white;
            overflow: hidden;
        }

        .bann .logo {
            width: 100px;
            height: 120px;
            background: url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/header/sprite.png) no-repeat top center;
            margin-left: 100px;
            float: left;
        }

        .bann .ipt {
            width: 700px;
            height: 120px;
            margin-left: 100px;
            position: relative;
            float: left;
        }

        .bann .ipp {
            float: left;
        }

        .bann .ipt input {
            width: 400px;
            height: 10px;

            padding: 10px;
            font-size: 20px;
            outline: none;
            border: 2px solid red;
            float: left;
        }

        .bann .ipt span.iconfont {
            position: absolute;
            top: 58px;
            left: 380px;
            font-size: 20px;
            cursor: pointer;
        }

        .bann .ipt .so {
            width: 40px;
            height: 34px;
            background-color: red;
            float: left;
            font-size: 20px;
            font-weight: 800;
            text-align: center;
            line-height: 34px;
            color: white;
            cursor: pointer;
        }

        .bann .bright {
            width: 180px;
            height: 30px;
            border: 1px solid #ccc;
            float: left;
            margin-top: 50px;
            margin-left: 20px;
            cursor: pointer;
        }

        .bann .bright .iconfont {
            color: red;
            font-size: 20px;
            margin-top: 6px;
            margin-left: 20px;
            float: left;
        }

        .bann .bright p {
            font-size: 16px;
            color: red;
            float: left;
            margin-left: 20px;
            margin-top: 4px;
        }

        .bann .bright:hover {
            border-color: red;
        }

        .bann .bbott {
            width: 600px;
            height: 30px;
            float: left;
        }

        .bann .bbott ul {
            width: 600px;
            height: 30px;
            float: left;
        }

        .bann .bbott ul li {
            float: left;
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }

        .bann .bbott ul li a {
            color: #ccc;
        }

        .bann .bbott ul li:hover a {
            color: red;
        }

        .bann .maxright {
            width: 200px;
            height: 110px;
            float: right;
            background: url(https://img13.360buyimg.com/da/jfs/t1/197524/35/21950/130567/62451d53E976d9cdc/6794459b3cd6fa84.jpg.webp)no-repeat bottom left;
            background-size: 100% 100%;
            margin-right: 200px;
            margin-top: 6px;
            cursor: pointer;
        }

        .bann .ipt .ipp .ipptop {
            width: 60px;
            height: 30px;
            background-color: red;
            margin-top: 20px;
        }

        .bann .ipt .ipp .ipptop a {
            height: 30px;
            line-height: 30px;
            margin-left: 14px;
            color: white;
            float: left;
        }

        .banns {
            width: 100%;
            height: 0;
            min-width: 1400px;
            border-bottom: 1px solid #ccc;
            position: fixed;
            top: 0;
            left: 0;
            transition: height 2s ease;
            overflow: hidden;
            z-index: 1111111;
            background-color: white;
        }

        .banns .logo {
            width: 100px;
            height: 120px;
            background: url(https://misc.360buyimg.com/mtd/pc/index_2019/1.0.0/assets/sprite/header/sprite.png) no-repeat top center;
            margin-left: 100px;
            float: left;
        }

        .banns .ipt {
            width: 700px;
            height: 120px;
            margin-left: 100px;
            position: relative;
            float: left;
        }

        .banns .ipp {
            float: left;
        }

        .banns .ipt input {
            width: 400px;
            height: 10px;

            padding: 10px;
            font-size: 20px;
            outline: none;
            border: 2px solid red;
            float: left;
        }

        .banns .ipt span.iconfont {
            position: absolute;
            top: 58px;
            left: 380px;
            font-size: 20px;
            cursor: pointer;
        }

        .banns .ipt .so {
            width: 40px;
            height: 34px;
            background-color: red;
            float: left;
            font-size: 20px;
            font-weight: 800;
            text-align: center;
            line-height: 34px;
            color: white;
            cursor: pointer;
        }

        .banns .bright {
            width: 180px;
            height: 30px;
            border: 1px solid #ccc;
            float: left;
            margin-top: 50px;
            margin-left: 20px;
            cursor: pointer;
        }

        .banns .bright .iconfont {
            color: red;
            font-size: 20px;
            margin-top: 6px;
            margin-left: 20px;
            float: left;
        }

        .banns .bright p {
            font-size: 16px;
            color: red;
            float: left;
            margin-left: 20px;
            margin-top: 4px;
        }

        .banns .bright:hover {
            border-color: red;
        }

        .banns .bbott {
            width: 600px;
            height: 30px;
            float: left;
        }

        .banns .bbott ul {
            width: 600px;
            height: 30px;
            float: left;
        }

        .banns .bbott ul li {
            float: left;
            width: 80px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            text-align: center;
        }

        .banns .bbott ul li a {
            color: #ccc;
        }

        .banns .bbott ul li:hover a {
            color: red;
        }

        .banns .maxright {
            width: 200px;
            height: 110px;
            float: right;
            background: url(https://img13.360buyimg.com/da/jfs/t1/197524/35/21950/130567/62451d53E976d9cdc/6794459b3cd6fa84.jpg.webp)no-repeat bottom left;
            background-size: 100% 100%;
            margin-right: 200px;
            margin-top: 6px;
            cursor: pointer;
        }

        .banns .ipt .ipp .ipptop {
            width: 60px;
            height: 30px;
            background-color: red;
            margin-top: 20px;
        }

        .banns .ipt .ipp .ipptop a {
            height: 30px;
            line-height: 30px;
            margin-left: 14px;
            color: white;
            float: left;
        }

        .back {
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 20px;
            position: fixed;
            display: none;
            background-color: pink;
            right: 50px;
            bottom: 50px;
        }

        .auto {
            min-width: 1200px;
            width: 100%;
            height: 420px;
            box-sizing: border-box;
            overflow: hidden;
            position: relative;
        }

        .auto .aleft {
            width: 100px;
            height: 420px;
            background: url(https://img13.360buyimg.com/pop/jfs/t1/95777/10/25190/166797/624546beEf4f64298/024b052cf64b4296.jpg.webp)no-repeat right bottom 100%;
            cursor: pointer;
            background-size: 200px 420px;
            float: left;
        }

        .auto .list {
            width: 200px;
            background-color: white;
            height: 420px;
            float: left;
        }

        .auto .list ul {
            width: 200px;
            height: 420px;
        }

        .auto .list ul li {
            height: 30px;
            text-align: center;
            line-height: 28px;
            font-size: 16px;
            border-bottom: 1px solid #ccc;
            box-sizing: border-box;
        }

        .auto .list ul li a {
            cursor: pointer;
        }

        .auto .list ul li:hover {
            background-color: #45b787;
        }

        .auto .list ul li a:hover {
            color: red;
        }

        .auto .pos {
            width: 0;
            height: 500px;
            position: absolute;
            top: 0;
            left: 100px;
            z-index: 1111;
            background: url(https://img13.360buyimg.com/pop/jfs/t1/95777/10/25190/166797/624546beEf4f64298/024b052cf64b4296.jpg.webp)no-repeat;
            background-size: 700px 500px;
            transition: 2s ease;
        }

        .auto .aleft:hover .pos {
            width: 700px;
        }

        .zss {
            padding: 10px;
            overflow: hidden;
            height: 75px;
            background: #111b24;
            font-size: 12px;
            color: #9699a8;
            line-height: 24px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box1">
        <a href="./index.html">
            <p>京东</p>
        </a>
        <ul>
            <li><a href="./login.html" class="login">登录</a></li>
            <li><a href="./resgiter.html" class="logup">注册</a></li>
            <li><a href="./mycat.html">我的订单</a></li>
            <li><a href="./list.html">商品列表</a></li>
            <li><a href="./my.html">个人中心</a></li>
        </ul>
    </div>
    <div class="bann">
        <div class="logo">

        </div>
        <div class="ipt">
            <div class="ipp">
                <div class="ipptop">
                    <a>京东</a>
                </div>
                <input type="text">
                <div class="so">
                    <i class="iconfont icon-sousuo"></i>
                </div>
            </div>
            <span class="iconfont icon-xiangji"></span>
            <div class="bright">
                <i class="iconfont icon-gouwuche"></i>
                <p>我的购物车</p>
            </div>
            <div class="bbott">
                <ul>
                    <li><a href="">家具家装节</a></li>
                    <li><a href="">大牌空调</a></li>
                    <li><a href="">9.9绿植</a></li>
                    <li><a href="">京东京造</a></li>
                    <li><a href="">维密</a></li>
                    <li><a href="">oppo手机</a></li>
                </ul>
            </div>
        </div>
        <div class="maxright">
            <a href=""></a>
        </div>
    </div>
    <div class="banns">
        <div class="logo">

        </div>
        <div class="ipt">
            <div class="ipp">
                <div class="ipptop">
                    <a>京东</a>
                </div>
                <input type="text">
                <div class="so">
                    <i class="iconfont icon-sousuo"></i>
                </div>
            </div>
            <span class="iconfont icon-xiangji"></span>
            <div class="bright">
                <i class="iconfont icon-gouwuche"></i>
                <p>我的购物车</p>
            </div>
            <div class="bbott">
                <ul>
                    <li><a href="">家具家装节</a></li>
                    <li><a href="">大牌空调</a></li>
                    <li><a href="">9.9绿植</a></li>
                    <li><a href="">京东京造</a></li>
                    <li><a href="">维密</a></li>
                    <li><a href="">oppo手机</a></li>
                </ul>
            </div>
        </div>
        <div class="maxright">
            <a href=""></a>
        </div>
    </div>
    <div class="auto">
        <div class="aleft">
            <div class="pos">

            </div>
        </div>
        <div class="list">
            <ul>
                <li><a>其他</a> /
                    <a>居家生活</a>
                </li>
                <li><a>内衣配饰</a> /
                    <a>厨房电器</a>
                </li>
                <li><a>大家电</a> /
                    <a>生活电器</a>
                </li>
                <li><a>海外购</a> /
                    <a>个护健康</a>
                </li>
                <li><a>童装玩具</a> /
                    <a>烹饪厨具</a>
                </li>
                <li><a>珠宝首饰</a> /
                    <a>家装建材</a>
                </li>
                <li><a>智能设备</a> /
                    <a>奶粉尿裤</a>
                </li>
                <li><a>钟表眼镜</a> /
                    <a>热门推荐</a>
                </li>
                <li><a>皮具箱包</a> /
                    <a>男装</a>
                </li>
                <li><a>邮币乐器</a> /
                    <a>女装</a>
                </li>
                <li><a>手机相机</a> /
                    <a>女鞋</a>
                </li>
                <li><a>电脑办公</a> /
                    <a>汽车生活</a>
                </li>
                <li><a>厨卫电器</a> /
                    <a>运动</a>
                </li>
                <li><a>食品酒水</a></li>
            </ul>
        </div>
        <div class="carousel">
            <ul>

            </ul>
            <ol>

            </ol>
            <a href="javascript:;" class="leftBtn">&lt;</a>
            <a href="javascript:;" class="rightBtn">&gt;</a>
        </div>
        <div class="aright">
            <ul class="active">
                <li>
                    <img src="https://img14.360buyimg.com/pop/s380x300_jfs/t1/220883/21/14955/41924/623446a6E7f6c51e9/4002c9c0435ed856.jpg.webp"
                        alt="">
                </li>
                <li>
                    <img src="https://img13.360buyimg.com/babel/s380x300_jfs/t1/96983/40/21058/99053/61d57a93Ed5d47c2f/ffce68b5ad102f55.png.webp"
                        alt="">
                </li>
                <li>
                    <img src="https://img12.360buyimg.com/babel/s380x300_jfs/t1/152314/13/19839/57522/603e118dE941f0ce9/fdff58457adbef3e.jpg.webp"
                        alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="https://img20.360buyimg.com/babel/s380x300_jfs/t1/169562/17/27598/86466/61b83ffbEb9b01749/7f0fe23eaaf48b4e.jpg.webp"
                        alt="">
                </li>
                <li>
                    <img src="https://img30.360buyimg.com/babel/s380x300_jfs/t1/165019/40/8639/60165/603d92e5E1d9852b8/2006d88391f60fe8.jpg.webp"
                        alt="">
                </li>
                <li>
                    <img src="https://img10.360buyimg.com/babel/s380x300_jfs/t1/179822/25/5393/75049/60a86e86Edafc14d5/5e9eb0f22d1f6b77.jpg.webp"
                        alt="">
                </li>
            </ul>
            <ul>
                <li>
                    <img src="https://img11.360buyimg.com/babel/s380x300_jfs/t1/156373/29/12285/68780/603f2b75E4fd09458/a6aa23f1163ff561.jpg.webp"
                        alt="">
                </li>
                <li>
                    <img src="https://img14.360buyimg.com/babel/s380x300_jfs/t1/168591/2/9328/64891/603ddb1aE93567699/3e4e717eeac051b2.jpg.webp"
                        alt="">
                </li>
                <li>
                    <img src="https://img20.360buyimg.com/pop/s380x300_jfs/t1/185240/39/21940/98393/624540fdEed74e131/c7d3adc663b090d6.png.webp"
                        alt="">
                </li>
            </ul>
            <a href="javascript:;" class="leftBtn">&lt;</a>
            <a href="javascript:;" class="rightBtn">&gt;</a>
        </div>
        <div class="mright">
            <div class="mtop">
                <img src=""
                    alt="">
            </div>
            <div class="mttop">
                <p>HI~欢迎逛京东</p>
                <div class="mtbott">
                    <span style="margin-right: 10px;">登录</span>
                    <span>|</span>
                    <span style="margin-left: 10px;">注册</span>
                </div>

            </div>
            <div class="mcenter">
                <a">京东快报</a>
                    <span style="margin-left: 100px;color: #ccc;font-size: 14px;">更多 ></span>
                    <table>
                        <tr style="line-height: 20px;">
                            <td style="color: red;background-color: pink;padding: 2px;">最新</td>
                            <td>中华老字号同仁堂: ...</td>
                        </tr>
                        <tr>
                            <td style="color: red;background-color: pink;padding: 2px;">最新</td>
                            <td>品质奶源, 便携梦幻 ...</td>
                        </tr>
                        <tr>
                            <td style="color: red;background-color: pink;padding: 2px;">推荐</td>
                            <td>过年买糖不纠结, 选 ...</td>
                        </tr>
                        <tr>
                            <td style="color: red;background-color: pink;padding: 2px;">热门</td>
                            <td>海信E3F和海信E3F- ...</td>
                        </tr>
                    </table>
            </div>
            <div class="top">
                <div class="header">
                    <span style="margin-right:20px ;margin-left: 20px;">话费</span>
                </div>
                <div class="header">
                    <span style="margin-right:20px ;margin-left: 20px;">机票</span>
                </div>
                <div class="header">
                    <span style="margin-left: 10px;">酒店</span>
                </div>


                <div class="body">
                    <div class="tap">
                        <div class="dctive">
                            <a class="ddctive active">话费充值</a>
                            <a class="ddctive">流量充值</a>
                        </div>
                        <div class="bctive">
                            <div class="bbctive">
                                号码 <input type="text" placeholder="移动/联通/电信">
                                <br>
                                面值 <input type="text" placeholder="100元">
                                <br>
                                <span>￥98.0 - ￥100.0</span>
                                <br>
                                <button>快速充值</button>
                            </div>
                            <div class="bbctive">
                                号码 <input type="text" placeholder="移动/联通/电信">
                                <br>
                                流量 <input type="text" placeholder="100M">
                                <br>
                                <span>￥9.5 - ￥14.0</span>
                                <br>
                                <button>快速充值</button>App Store充值卡
                            </div>
                        </div>
                    </div>

                    <div class="tap">
                        <div class="dctive">
                            <a class="ddctive2">国内机票</a>
                            <a class="ddctive2">港澳台</a>
                        </div>
                        <div class="bctive">
                            <div class="bbctive2">
                                出发 <input type="text" placeholder="广州">
                                <br>
                                到达 <input type="text" placeholder="桂林">
                                <br>
                                日期 <input type="text" placeholder="2022-4-8">
                                <br>
                                <button>机票查询</button>
                                <a>当季热门特惠机票</a>
                            </div>
                            <div class="bbctive2">
                                <input type="radio" name="n1">单程
                                <input type="radio" name="n1">往返
                                <br>
                                出发 <input type="text" placeholder="城市">
                                到达<input type="text" placeholder="城市">
                                日期<input type="text" placeholder="出发">
                                <br>
                                <button>机票查询</button>
                                <a>国际机票任性搜</a>
                            </div>
                        </div>
                    </div>

                    <div class="tap">
                        <div class="dctive">
                            <a class="ddctive3">国内/港台</a>
                            <a class="ddctive3">促销活动</a>
                        </div>
                        <div class="bctive">
                            <div class="bbctive3">
                                目的 <input type="text" placeholder="广州">
                                <br>
                                入住 <input type="text" placeholder="2022-04-10">
                                <br>
                                离店 <input type="text" placeholder="2022-04-11">
                                <br>
                                <span>酒店/商圈/地标</span>
                                <br>
                                <button>酒店查询</button>
                                <a>订酒店上京东</a>
                            </div>
                            <div class="bbctive3">
                                <img src="https://img14.360buyimg.com/da/jfs/t1/89993/13/24303/15784/622805c8Ea5dd460f/c57779c557fd993a.jpg"
                                    alt="" width="100px" height="120px">
                                <img src="https://img20.360buyimg.com/da/jfs/t1/149994/3/17563/15777/5fd08db0Ea2df8187/542b1a78247311ca.jpg"
                                    alt="" width="100px" height="120px">
                            </div>
                        </div>

                    </div>
                </div>



            </div>
        </div>
    </div>
    <div class="back">
        回到顶部
    </div>
    <div class="ccenter">
        <p>爆款推荐</p>
        <div class="centerleft">
            <ul>
                <li></li>
            </ul>
            <a href="javascript:;" class="celeft">&lt;</a>
            <a href="javascript:;" class="ceright">&gt;</a>
        </div>
    </div>
    <div style="background-color: white;margin-top: 40px;text-align: center;">
        <p style="font-weight: 800;font-size: 20px;">好物推荐</p>
        <div class="box2">
            <div class="container">
                <img src="https://img14.360buyimg.com/ceco/s150x150_jfs/t1/147923/30/18586/454087/5fdc028eE9518ec6b/1e4e64b14043aa71.png.webp"
                    alt="">
                <img src="https://img14.360buyimg.com/ceco/s150x150_jfs/t1/159722/38/5682/268261/601a43e3E78cbacb6/60bdf8c1c170c8ae.jpg!q70.jpg.webp"
                    alt="">
                <img src="https://img11.360buyimg.com/mobilecms/s150x150_jfs/t1/95049/33/2570/130678/5dd2a567E8f4d6e13/1d597ef0cf85be04.jpg!q70.jpg.webp"
                    alt="">
                <img src="https://img30.360buyimg.com/ceco/s150x150_jfs/t1/124187/20/17208/67618/5fa0134fE6c602b4d/301ac0061ce1b608.jpg!q70.jpg.webp"
                    alt="">
                <img src="https://img30.360buyimg.com/ceco/s150x150_jfs/t1/157836/24/17699/104143/606dc052E119dc5ec/3ae50321447eeb25.jpg!q70.jpg.webp"
                    alt="">
                <img src="https://img11.360buyimg.com/ceco/s150x150_jfs/t3910/181/779565160/234721/6b17eb6f/585e1edcN1e9fee1c.jpg!q70.jpg.webp"
                    alt="">
                <img src="https://img11.360buyimg.com/ceco/s150x150_jfs/t1/193282/12/7389/50575/60c1fb2eE87812040/3fc54428f8cf7c3a.jpg!q70.jpg.webp"
                    alt="">
            </div>
        </div>
    </div>

    <div class="zss">
        <p>周帅帅集团能力有限公司</p>
        <p>周帅帅著</p>
        <p>京ICP备12003911号-6 &nbsp Copyright &copy2013-2019</p>
    </div>
</body>
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/utils.js"></script>
<script src="./js/auto.js"></script>
<script src="./js/aright.js"></script>
<script src="./js/center.js"></script>
<script src="./js/bauto.js"></script>
<script>
    var username = getCookie('username')
    if (username) {
        var loginLi = document.querySelector('.login')
        var mtbott = document.querySelector('.mright .mttop .mtbott')
        loginLi.innerHTML = `
       <li><a href ="./my.html">欢迎用户${username}</a></li>
       `
        mtbott.innerHTML = `
       <li><a href ="./my.html">欢迎用户${username}</a></li>
       `

        var logup = document.querySelector('.logup')
        logup.innerHTML = `
       <a href = "javascript:;" class="logout">登出</a>
       `

        //登出
        document.querySelector('.logout').onclick = function () {
            loginLi.innerHTML = `
        <li><a href="./login.html" class="login">登录</a></li>
       `
            logup.innerHTML = `
       <li><a href="./resgiter.html.html" class="logup">注册</a></li>
       `
            mtbott.innerHTML = `
            <span style="margin-right: 10px;">登录</span>
                    <span>|</span>
                    <span style="margin-left: 10px;">注册</span>
       `
            //删除cookie
            removeCookie('username')
        }
    }

    //顶部悬浮
    var ding = document.querySelector('.banns')
    var dingbu = document.querySelector('.back')
    window.onscroll = function () {
        var t = document.documentElement.scrollTop || document.body.scrollTop
        if (t >= 500) {
            ding.style.height = '120px'
            ding.style['border-bottom'] = '3px solid red';
            dingbu.style.display = 'block'
        } else {
            ding.style.height = '0'
            ding.style['border-bottom'] = '0'
            dingbu.style.display = 'none'
        }
    }
    //回到顶部
    dingbu.onclick = function () {
        var t = document.documentElement.scrollTop || document.body.scrollTop
        var timerId = setInterval(function () {
            t -= 200
            document.documentElement.scrollTop = document.body.scrollTop = t
            if (t <= 0) {
                clearInterval(timerId)
            }
        }, 100)
    }

    //获取tap中的选项
    var headers = document.querySelectorAll('.header')
    //获取到根据tap来切换显示div
    var tap = document.querySelectorAll('.tap')

    //遍历每个tap选项绑定移入事件
    headers.forEach((ele, index) => {
        //ele代表每个子元素,index代表当前下标俗称v,i
        ele.addEventListener('mouseenter', (e) => {
            //当鼠标移入使遍历所以显示的div让它隐藏
            tap.forEach((be) => {
                be.style.display = 'none'
            })

            //然后让鼠标移入使获取下标，就是index对应需要显示的div让它显示
            tap[index].style.display = 'block'

            //让所有的tao切换中的元素清除默认选中效果
            headers.forEach((he) => {
                he.classList.remove('active')
            })
            //移入使添加默认选中效果
            ele.classList.add('active')
        })
    }) //最后复制三次即可

    var ddctive = document.querySelectorAll('.ddctive')
    var bbctive = document.querySelectorAll('.bbctive')
    ddctive.forEach((ele, index) => {
        ele.addEventListener('mouseenter', (e) => {
            bbctive.forEach((be) => {
                be.style.display = 'none'
            })
            bbctive[index].style.display = 'block'
            ddctive.forEach((he) => {
                he.classList.remove('active')
            })
            ele.classList.add('active')
        })
    })

    var ddctive2 = document.querySelectorAll('.ddctive2')
    var bbctive2 = document.querySelectorAll('.bbctive2')
    ddctive2.forEach((ele, index) => {
        ele.addEventListener('mouseenter', (e) => {
            bbctive2.forEach((be) => {
                be.style.display = 'none'
            })
            bbctive2[index].style.display = 'block'
            ddctive2.forEach((he) => {
                he.classList.remove('active')
            })
            ele.classList.add('active')
        })
    })

    var ddctive3 = document.querySelectorAll('.ddctive3')
    var bbctive3 = document.querySelectorAll('.bbctive3')
    ddctive3.forEach((ele, index) => {
        ele.addEventListener('mouseenter', (e) => {
            bbctive3.forEach((be) => {
                be.style.display = 'none'
            })
            bbctive3[index].style.display = 'block'
            ddctive3.forEach((he) => {
                he.classList.remove('active')
            })
            ele.classList.add('active')
        })
    })

    // 点击搜索
    $('.so').click(function () {
        // 获取关键字
        var keywords = $(this).prev().val().trim()
        if (keywords === '') {
            return false
        }
        location.href = 'list.html?keywords=' + keywords
    })
</script>

</html>